<template>
  <div class="admin-web-conclusion-addd">
    <div class="submint-box clearfix">
      <el-button
        size="mini"
        class="w-float-right"
        type="primary"
        @click="saveBtnClick">保存</el-button>
      <span class="w-float-right">&nbsp;&nbsp;</span>
      <el-button
        v-if="studyModel._id"
        size="mini"
        class="w-float-right"
        @click="previewClick">预览</el-button>
    </div>
    <el-form
      ref="form"
      :model="studyModel"
      label-width="80px">
      <el-form-item
        :rules="[{ required: true, message: '不能为空'}]"
        prop="title"
        label="标题">
        <el-input v-model="studyModel.title"/>
      </el-form-item>
      <el-form-item label="封页">
        <w-up-image
          ref="UP_IMAGE"
          :souce-url="studyModel.pic"/>
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          v-model="studyModel.describe"
          type="textarea"/>
      </el-form-item>
      <el-form-item
        :rules="[{ required: true, message: '不能为空'}]"
        prop="type"
        label="类型">
        <el-input
          placeholder="请选择内容"
          v-model="studyModel.type">
          <el-select
            v-model="studyModel.type"
            style="width: 150px"
            slot="prepend"
            placeholder="请选择">
            <el-option
              v-for="(v) in typeArr"
              :label="v"
              :value="v"
              :key="v"/>
          </el-select>
        </el-input>
      </el-form-item>
      <w-marked-editor
        ref="MARKED_EDITER"
        :imgbtn="true"
        :left="40"
        @save="saveBtnClick"/>
    </el-form>
  </div>
</template>

<script>
import StudyModel from '@/models/web/StudyModel'
import WUpImage from '@/components/global/imageUp/oss'
import WMarkedEditor from '@/components/pc/marked/editor'
import Config from '@/config/index'
export default {
  name: 'AdminWebConclusionAdd',
  components: {
    WUpImage,
    WMarkedEditor
  },
  data() {
    return {
      editor: null,
      studyModel: new StudyModel(),
      // 类型数组
      typeArr: []
    }
  },
  mounted() {
    // 如果有参数就表示编辑
    if (this.$route.query.id) {
      this.studyModel._id = this.$route.query.id
      this.findOne()
    }
    this.getTypeArr()
  },
  methods: {
    /**
     * 表单校验、
     */
    checkForm() {
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            resolve()
          } else {
            this.$w_popview.msgError('请完成填写')
            reject()
          }
        })
      })
    },
    /**
     * 保存按钮点击
     */
    saveBtnClick() {
      this.checkForm().w_then(() => {
        this.studyModel.content = this.$refs['MARKED_EDITER'].getData()
        this.$refs['UP_IMAGE'].upImage().w_then((url) => {
          this.studyModel.pic = url
        }, () => {
        }, () => {
          this.studyModel.addOrUpdate().w_then()
        })
      })
    },
    /**
     * 获取单个数据
     */
    findOne() {
      this.studyModel.getDetail().then((data) => {
        this.$refs['MARKED_EDITER'].setData(data.content)
      }).catch(() => {})
    },
    /**
     * 预览按钮点击
     */
    previewClick() {
      window.open(`#/web/conclusion/detail?id=${this.studyModel._id}`)
    },
    /**
     * 获取类型数组
     */
    getTypeArr() {
      StudyModel.loadTypes().then((dataArr) => {
        this.typeArr = dataArr
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
  .admin-web-conclusion-addd {
    >.submint-box {
      padding-bottom: 20px;
    }
  }

</style>
